<template>
  <a-card>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="课程基本信息" key="1">
        <detail-list>
          <detail-list-item term="课程代码">{{ courseInfo.kch }}&emsp;</detail-list-item>
          <detail-list-item term="课程中文名">{{ courseInfo.kcmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程英文名">{{ courseInfo.kcywmc }}&emsp;</detail-list-item>
          <detail-list-item term="所属单位">{{ courseInfo.ssyxmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程层次">{{ courseInfo.kcccmc }}&emsp;</detail-list-item>
          <detail-list-item term="课程类别">{{ courseInfo.kclbmc }}&emsp;</detail-list-item>
          <detail-list-item term="授课方式">{{ courseInfo.skfsmc}}&emsp;</detail-list-item>
          <detail-list-item term="考试方式">{{ courseInfo.ksfsmc }}&emsp;</detail-list-item>
          <detail-list-item term="学分">{{ courseInfo.xf }}&emsp;</detail-list-item>
          <detail-list-item term="学时">{{ courseInfo.zxs }}&emsp;</detail-list-item>
        </detail-list>
      </a-tab-pane>
      <a-tab-pane tab="课程简介" key="2">
        <div v-html="decodeString(courseInfo.kcjj)"></div>
      </a-tab-pane>
      <a-tab-pane tab="教学大纲" key="3">
        <div v-html="decodeString(courseInfo.jxdg)"></div>
      </a-tab-pane>
    </a-tabs>
    <a-form :form="form" style="margin-top: 50px">
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item
            label="审核结果"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['shzt',
              {
                rules: [{ required: true, message: '请选择审核结果!' }],
              }]">
              <a-select-option value="03">通过</a-select-option>
              <a-select-option value="04">不通过</a-select-option>
              <!-- <a-select-option v-for="i in TYPE0338" :key="i.id" :value="i.code">{{ i.name }}</a-select-option> -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="16" :sm="24">
          <a-form-item
            label="审核意见"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input type="textarea" v-decorator="['shsm']" :autosize="{ minRows: 4, maxRows: 6 }"/>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="ant-pro-footer-toolbar">
        <a-button style="float: right;margin-top: 10px;" @click="submit" :loading="loadingBtn" type="primary">提交审核</a-button>
        <a-button style="float: right;margin-top: 10px;margin-right: 20px" @click="back" type="primary">返回</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
import DetailList from '~/tool/DetailList'
import { mapState } from 'vuex'
const DetailListItem = DetailList.Item

export default {
  data () {
    return {
      courseInfo: {},
      loadingBtn: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0338')
    this.$api.cultivate.courseDetail(this.$route.params.id).then(res => {
      this.courseInfo = res.data
    })
  },
  computed: {
    ...mapState({
      TYPE0338: state => state.app['TYPE0338']
    })
  },
  components: {
    DetailList,
    DetailListItem
  },
  methods: {
    decodeString (string) {
      if (string) {
        var temp = "";
        if(string.length == 0) return "";
        temp = string.replace(/&amp;/g,"&");
        temp = temp.replace(/&lt;/g,"<");
        temp = temp.replace(/&gt;/g,">");
        temp = temp.replace(/&nbsp;/g," ");
        temp = temp.replace(/&#39;/g,"\'");
        temp = temp.replace(/&quot;/g,"\"");
        return temp;  
      }
    },
    submit () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        this.loadingBtn = true
        this.$api.cultivate.courseCheck(Object.assign(values, {ids: this.$route.params.id})).then(res => {
          this.$message.success(res.data)
          this.$router.back()
        }).finally(() => {
          this.loadingBtn = false
        })
      })
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style>

</style>
